<template>
    <div>
        <el-card>
            <div slot="header">
                <span class="title">
                    <h3>投入品禁用名单</h3>
                </span>
            </div>
            <el-row>
                <el-col :span='24'>
                    <el-button class='theme-button float-right' @click='add' icon='el-icon-plus'>新增</el-button>
                </el-col>
            </el-row>
            <el-row class='mt-20'>
                <el-col :span='24'>
                    <el-table v-loading='tableLoading' :data='tableData' stripe border :header-cell-style="{ background: 'rgba(2,179,134,0.1)',color:'rgba(0,0,0,0.85)'}">
                        <el-table-column align='center' type='index' label='序号'></el-table-column>
                        <el-table-column align='center' prop='key' label='禁用关键字'></el-table-column>
                        <el-table-column align='center' prop='createTime' label='创建时间'></el-table-column>
                        <el-table-column align='center' type='operation' label='操作'>
                            <template slot-scope='scope'>
                                <el-button style='margin-right: 10px' type='text' @click='edit(scope.row)'>编辑</el-button>
                                <el-popconfirm title="确定删除吗？" @confirm='del(scope.row)'>
                                    <el-button slot="reference" type='text' style='color: red'>删除</el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        class='mt-20 text-right'
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog :title='dialogTitle' :visible.sync='dialogVisible' width='40%'>
            <el-form :model='form' :rules='rules' ref='form'>
                <el-form-item label='禁用关键字：' prop='key'>
                    <el-input v-model='form.key'></el-input>
                </el-form-item>
            </el-form>
            <span slot='footer' class='dialog-footer'>
                <el-button @click='dialogVisible = false'>取 消</el-button>
                <el-button class='theme-button' :loading='loading' @click='submitForm'>确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import { addForbiddenKey, deleteForbiddenKey, getForbiddenKey } from '@/request/api';

export default {
    name: 'inputBan',
    data(){
        return{
            tableLoading:false,
            page: {
                pageSize: 10,
                pageNum: 1,
                total: 0
            },
            tableData: [],
            dialogTitle:'新增',
            dialogVisible: false,
            rules: {
                key: [
                    { required: true, message: '请输入禁用关键字', trigger: 'blur' }
                ],
            },
            loading:false,
            form: {
                key:'',
            }
        }
    },
    watch:{
        dialogVisible(val){
            if(!val){
                this.form = {
                    key:'',
                }
                this.$refs.form.resetFields();
                this.getTableData()
            }
        }
    },
    mounted(){
        this.getTableData();
    },
    methods:{
        //增
        add(){
            this.dialogTitle = '新增'
            this.dialogVisible = true
        },
        //改
        edit(row){
            this.dialogTitle = '编辑'
            this.dialogVisible = true
            this.form = row
        },
        //删
        async del(row){
            const res = await deleteForbiddenKey([row.id])
            if(res.code == 200){
                this.$message.success('操作成功')
                this.getTableData()
            }else{
                this.$message.error('删除失败')
            }
        },
        submitForm(){
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading = true
                    addForbiddenKey(this.form).then(res=>{
                        if(res.code == 200){
                            this.$message.success('操作成功')
                            this.dialogVisible = false
                            this.getTableData()
                        }else{
                            this.$message.error(res.errMsg)
                        }
                    }).catch(err=>{
                        if (err.data){
                            this.$message({
                                message:err.data.errMsg,
                                type:'error'
                            })
                        }
                    })
                    this.loading = false
                }
            })
        },
        async getTableData(){
            let params = {
                page: this.page.pageNum,
                pageSize: this.page.pageSize
            }
            const res = await getForbiddenKey(params)
            if(res.code == 200){
                this.tableData = res.data.content
                this.page.total = res.data.totalElements
            }
        },
        handleSizeChange(v){
            this.page.pageSize = v;
            this.getTableData()
        },
        handleCurrentChange(v){
            this.page.pageNum = v;
            this.getTableData()
        },
    },
};
</script>
<style lang='less' scoped>
@import "@/assets/css/common.less";
.float-right{
    float: right;
}
.mt-20{
    margin-top: 20px;
}
.text-right{
    text-align: right;
}
</style>
